{% extends '_index.html' %}


{% block main_contain %}
<div class="row" id="CamerasView">
    <div class="row">
        <div v-for="cam in Entrance" class="col-6">
            <div class="card" :class="cam.LicensePlate=='UNKNOWN'?'card-warning':'card-primary'">
                <div class="card-header">
                    <div class="row justify-content-between">
                        <span style="font-size:x-large"><i :class="['fas',cam.VehicleType=='Car'?'fa-car':'fa-motorcycle']"></i> 
                            {[ ColumnName[cam.GateType] ]}{[ ColumnName[cam.VehicleType] ]}識別結果：<strong>{[ cam.LicensePlate ]}</strong>
                        </span>
                        <span style="font-size:x-large"><i class="fas fa-clock"></i> 識別時間：{[ cam.GateTime ]}</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <img :src="cam.LicensePlateImg==''?'{{url_for('static', filename='images/default/vehicle.jpg')}}':cam.LicensePlateImg" 
                        class="img-thumbnail" style="width: 64%;">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div v-for="cam in Exit" class="col-6">
            <div class="card" :class="cam.LicensePlate=='UNKNOWN'?'card-warning':'card-primary'">
                <div class="card-header">
                    <div class="row justify-content-between">
                        <span style="font-size:x-large"><i :class="['fas',cam.VehicleType=='Car'?'fa-car':'fa-motorcycle']"></i> 
                            {[ ColumnName[cam.GateType] ]}{[ ColumnName[cam.VehicleType] ]}識別結果：<strong>{[ cam.LicensePlate ]}</strong>
                        </span>
                        <span style="font-size:x-large"><i class="fas fa-clock"></i> 識別時間：{[ cam.GateTime ]}</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <img :src="cam.LicensePlateImg==''?'{{url_for('static', filename='images/default/vehicle.jpg')}}':cam.LicensePlateImg" 
                        class="img-thumbnail" style="width: 64%;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.row -->
{% endblock %}


<!--頁面脚本-->
{% block scripts %}
{{ super() }}
<script>
    // 相机预览
    var CamerasView = new Vue({
        el: '#CamerasView',
        delimiters: ['{[', ']}'],
        data: {
            Entrance: [
                {
                    GateType: 'Entrance',
                    VehicleType: 'Car',
                    LicensePlate: '',
                    LicensePlateImg: '',
                    GateTime: '',
                },
                {
                    GateType: 'Entrance',
                    VehicleType: 'Moto',
                    LicensePlate: '',
                    LicensePlateImg: '',
                    GateTime: '',
                },
            ],
            Exit: [
                {
                    GateType: 'Exit',
                    VehicleType: 'Car',
                    LicensePlate: '',
                    LicensePlateImg: '',
                    GateTime: '',
                },
                {
                    GateType: 'Exit',
                    VehicleType: 'Moto',
                    LicensePlate: '',
                    LicensePlateImg: '',
                    GateTime: '',
                },
            ],
            ColumnName:{Car:'私家車',Moto:'電單車',Entrance:'入口',Exit:'出口'},
        },
        methods: {
            // 初始化
            cameras_snapshot(){
                let snapshot = JSON.parse('{{CamerasStatusJSON|safe}}')
                snapshot.forEach(status=>{this.refresh_cameras_trigger(status)})
            },
            // 识别事件
            refresh_cameras_trigger(status){
                switch(status.GateType){
                    case 'Entrance':
                        this.Entrance.forEach(cam=> {if(cam.VehicleType==status.VehicleType){for(key in cam){cam[key]=status[key]}}});break
                    case 'Exit':
                        this.Exit.forEach(cam=> {if(cam.VehicleType==status.VehicleType){for(key in cam){cam[key]=status[key]}}});break
                }
            }
        },
        mounted: function(){
            // 加载快照
            this.cameras_snapshot();
            // socketio
            namespace = '/carpark_status';
            // Conn
            var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
            socket.auto
            // Send
            socket.on('connect', function(){console.log('Connect Success!');socket.emit('cameras_event', {'data': 'get_cameras'})});
            // Recv
            socket.on('cameras_status', function(ret){if(ret!=null){CamerasView.refresh_cameras_trigger(ret.status)}});
            // Close
            socket.on('disconnect', function(){console.log('Disconnect Success!')});
        }
    });
</script>
{% endblock %}